<template>
  <div class="wifi-2.4g relative">
    <page-loading></page-loading>
    <!-- 暂时隐藏form2 v-if="key=='form1'" -->
    <!-- <my-select></my-select> -->
    <div class="form-wrap mb20" v-for="(value, key) in forms" :key='key'>
      <div class="form-title">{{value.title.replace("2.4", "5")}}</div>
      <!-- idx=5 工作模式暂时隐藏 -->
      <div v-for="(item, idx) in value.fields" :key="idx" v-if="idx!=5">
        <!-- <div class="field" v-if="idx<limit">{{item.label}}：</div> -->
        <os-switch v-if="item.type=='switch'&&idx<limit"
        :item="item.label" v-model="wifi2_data[idx]">
        </os-switch>
        <os-input v-if="idx==1&&item.type=='input'"
        :item="item.label.replace('2.4', '5')" v-model="wifi2_data[idx]"
        :eye="true" :hide="hide_wifiname" @eye="operate">
        </os-input>
        <os-input v-if="idx<limit&&idx==6" :item="item.label.replace('2.4', '5')"
        :eye="true" :hide="seekey" v-model="wifi2_data[idx]" @eye="operate(1)">
        </os-input>
        <os-input v-if="idx<limit&&idx==7" :item="item.label"
        v-model="wifi2_data[idx]" @input="err_7=false">
          <template #suffix>
            <span :class='{"tip": true, "text-red": err_7}' v-if="item.tip">
              {{item.tip}}
            </span>
          </template>
        </os-input>
        <os-input v-if="idx<limit&&idx==8" :item="item.label"
        v-model="wifi2_data[idx]" @input="err_8=false">
          <template #suffix>
            <span :class='{"tip": true, "text-red": err_8}' v-if="item.tip">
              {{item.tip}}
            </span>
          </template>
        </os-input>
        <os-entry :item="item.label" v-if="item.type=='select'&&idx<limit">
          <os-select v-model="macfilter" v-if="idx==0" :options="value.select_mac_filter"/>
          <os-select v-model="wifi2_data[2]" v-if="idx==2" :options="value.select_channel_5g" />
          <os-select v-model="wifi2_data[3]" v-if="idx==3" :options="value.select_bandwidth"/>
          <os-select v-model="wifi2_data[4]" v-if="idx==4" :options="value.select_encryption"/>
          <os-select v-model="wifi2_data[5]" v-if="idx==5" :options="value.select_workmode"/>
        </os-entry>
        <os-textarea :item="item" v-model="maclist" v-if="item.type=='textarea'">

        </os-textarea>
      </div>
      <div class="vertical-align-flex" v-if="value.fold">
        <div class="field"></div>
        <div class="value">
          <span class="add" @click="handle_expand">{{more_text.replace("2.4", "5")}}</span>
        </div>
      </div>
      <div class="value alone-right">
        <div class="btn btn-blue" @click="handle_save(key)">{{value.save}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        forms: this.$t('wifi._24g'),
        wifi2_config: {},
        // wifi2 mac地址
        bssid: '',
        wifi2_data: Array.apply("", {
          length: 13
        }),
        err_7: false,
        err_8: false,
        pwd: true,
        // 是否隐藏wifi名字
        hide_wifiname: false,
        limit: 4,
        macfilter: '',
        maclist: '',
        // 是否显示密码
        seekey: false,
      }
    },
    computed: {
      more_text() {
        if (this.limit == 4) {
          return this.$t('wifi._24g.form1.unfold')
        } else {
          return this.$t('wifi._24g.form1.fold')
        }
      }
    },
    methods: {
      operate(index) {
        if(index == 1) {
          this.seekey = !this.seekey
        } else {
          this.hide_wifiname = !this.hide_wifiname
          if (this.hide_wifiname) {
            // this.$refs.field2.readonly = true  disabled
          }
        }
      },
      get_wifi2_config() {
        this.$req.get('/webapi?op=getWiFi5').then(res => {
          console.log(res)
          this.bssid = res.bssid
          this.hide_wifiname = res.hidden == "1" ? true : false
          this.wifi2_data = this.obj_to_arr(res, ["enabled", "ssid", "channel",
            "htmode", "encryption", '', "key", "threshold", 'rts_threshold',
            'wmm', 'isolated',
          ])
          this.wifi2_data.splice(2, 1, res.channel)
          this.$set(this.wifi2_data, 4, res.encryption=="" ? "none" : res.encryption)
          // this.wifi2_data.splice( , 1, )
          // this.wifi2_data.splice( , 1, )
          // switch (res.macfilter) {
          //   case '':
          //     this.mac_filter = ''
          //     break
          //   case '0':
          //     this.mac_filter = 'disable'
          //     break
          //   case '1':
          //     this.mac_filter = res.filter_type
          //     this.mac_list = res.maclist
          //     break
          // }
          Object.assign(this, {
            macfilter: res.macfilter,
            maclist: res.maclist.join("\n"),
          })
          console.log(this.macfilter, res.macfilter)
        })
      },
      handle_switch(idx) {
        // Vue.prototype.set  this.$set
        // mutating methods  pop push shift unshift splice sort reverse
        // this.$set(this.wifi2_data, idx, !this.wifi2_data[idx])、
        let value = this.wifi2_data[idx]
        console.log(typeof value)
        // typeof  number string boolean date [] {}
        if (typeof value == 'string') {
          value = value == '1' ? '0' : '1'
        } else {
          value = !value
        }
        this.wifi2_data.splice(idx, 1, value)
      },
      handle_expand() {
        this.limit = this.limit == 4 ? 20 : 4
      },
      // 保存wifi设置信息
      handle_save(key) {
        if(this.wifi2_data[0]=="1" && !this.wifi2_data[1]) {
          this.$msgbox.confirm(this.$t("notification.ssidEmpty"), {
            title: this.$t("messageBox.title.info"),
            type: "error", // 同iconClass 比其优先级低
            showClose: true,
            // center: true,
            confirmButtonText: this.$t("btn.confirm"),
            cancelButtonText: this.$t("btn.cancel"),
          }).then(res => {

          }).catch(err => {

          })
          return
        }
        if(this.wifi2_data[7]) {
          Number(this.wifi2_data[7])>=256 && Number(this.wifi2_data[7])<=2346 ? "" : this.err_7 = true
        } else {
          this.wifi2_data[7] = ""
        }
        if(this.wifi2_data[8]) {
          Number(this.wifi2_data[8])>=1 && Number(this.wifi2_data[8])<=2347 ? "" : this.err_8 = true
        } else {
          this.wifi2_data[8] = ""
        }
        if(this.wifi2_data[4]!="none"&&(this.wifi2_data[6] ? this.wifi2_data[6].length<8 : true )){
          this.pwd = false
          this.$msgbox.confirm(this.$t("notification.pwdLengthNotice"), {
            title: this.$t("messageBox.title.info"),
            type: "error", // 同iconClass 比其优先级低
            showClose: true,
            // center: true,
            confirmButtonText: this.$t("btn.confirm"),
            cancelButtonText: this.$t("btn.cancel"),
          }).then(res => {

          }).catch(err => {

          })
        } else {
          this.pwd = true
        }
        if(this.err_7==false&&this.err_8==false&&this.pwd==true){

        }else {
          return
        }
        let params = {};
        // if(key=='form1'){
        params = this.arr_to_obj(this.wifi2_data, ["enabled", "ssid", "channel",
          "htmode", "encryption", 'workmode', "key", "threshold", 'rts_threshold',
          'wmm', 'isolated',
        ])
        params.channel = params.channel + ''
        params.bssid = this.bssid
        params.hidden = this.hide_wifiname == true ? "1" : "0"
        // params.filter_type = this.mac_filter
        // } else {
        // switch (this.mac_filter) {
        //   case '':
        //     params.macfilter = ''
        //     params.maclist = ''
        //     break
        //   case 'disable':
        //     params.macfilter = '0'
        //     params.filter_type = 'disable'
        //     params.maclist = ''
        //     break
        //   case 'allow':
        //     params.macfilter = '1'
        //     params.filter_type = 'allow'
        //     params.maclist = this.mac_list.split('\n')
        //     break
        //   case 'deny':
        //     params.macfilter = '1'
        //     params.filter_type = 'deny'
        //     params.maclist = this.mac_list.split('\n')
        //     break
        //     // default: case匹配不到时进入default代码块
        // }
        // }
        Object.assign(params, {
          macfilter: this.macfilter,
          maclist: this.maclist.indexOf("\n") > -1 ? this.maclist.split("\n") : [this.maclist]
        })
        params.encryption == "none" ? params.key = "" : ""
        console.log(params)
        // this.$req.post('/webapi?op=setWiFi2', params).then(res=> {
        //   console.log(res)
        //   this.$message.success('set wifi2 success')
        //   this.get_wifi2_config()
        // })
        this.proxy_req('post', '/webapi?op=setWiFi5', params, this.get_wifi2_config, true)
      },
    },
    created() {
      this.$bus.emit('changeTab', 1)
      this.get_wifi2_config()
    },
    // activated(){
    //   this.$bus.emit('changeTab', 0)
    // }
  }
</script>

<style lang="scss" scoped>
  text-red{
    color: red;
  }
</style>
